<template>
  <div class="tag-wrap" :class="catClass" @click="clicked">
    <ri :i="itype">{{tag.val}}</ri>
    <ri class="close-button" i="x" v-if="deletable" @click="deleteTag"></ri>
  </div>
</template>

<script>
// TODO: 现在所有的标签的样式都是写在代码中的，未来应当扩充成让用户可以编辑自定义标签的样式，选择对应的颜色和图标
let catMap = {
  0: "topic", 
  1: "event", 
  2: "people", 
  3: "place", 
  4: "time", 
  5: "emotion",
  6: "genre",
  7: "era",
  8: "style",
  9: "field",
  10: "language",
  11: "tune",
  12: "rhyme",
};
let catIconMap = {
  0: "comments", // topic
  1: "hashtag", // event
  2: "user", // people
  3: "place", 
  4: "moon", // time
  5: "emotion",
  6: "genre",
  7: "era",
  8: "style",
  9: "field",
  10: "language",
  11: "tune",
  12: "rhyme",
};
export default {
  props: ["tag", "deletable"],
  computed: {
    itype() {
      let cat = catIconMap[this.tag.cat];
      if (!cat) {
        return "comments";
      } else {
        return cat;
      }
    },
    catClass() {
      return catMap[this.tag.cat];
    }
  },
  methods: {
    clicked() {
      this.$emit("click", this.tag);
    },
    deleteTag() {
      this.$emit("delete-tag", this.tag);
    }
  }
};
</script>

<style lang="stylus">
$bkRate = 0.1

TagWrap(r, g, b)
  color rgba(r, g, b, 1.0)
  background-color rgba(r, g, b, 0.1)
  border-color rgba(r, g, b, 0.3)
  // border-right 1px solid rgba(r, g, b, 0.1)
  // border-bottom 1px solid rgba(r, g, b, 0.3)
  box-shadow 1px 1px 1px 0px rgba(r, g, b, 0.3)

Red()
  TagWrap(245, 108, 108)
Orange()
  TagWrap(253, 128, 66)
Yellow()
  TagWrap(230, 162, 60)
Green()
  TagWrap(66,185,131)
Teal()
  TagWrap(0, 128, 128)
Cyan()
  TagWrap(0, 127, 255)
Blue()
  TagWrap(64, 158, 255)
Purple()
  TagWrap(160, 118, 229)
Grey()
  TagWrap(144, 147, 153)
LightBlue()
  TagWrap(102, 177, 255)
Grass()
  TagWrap(103, 194, 58)
MolandiGreen()
  TagWrap(181, 196, 177)

.tag-wrap
  display inline-block
  font-family "simsun",monospace
  font-size 0.7em
  cursor pointer
  border-radius 3px
  padding 0.5vh 0.15vw 0.3vh 0.15vw
  Blue()

  &.topic
    LightBlue()

  &.event,&.genre
    LightBlue()
    // Red()

  &.place,&.era
    // Green()
    Orange()

  &.language
    Blue()

  &.field
    Teal()

  &.people,&.style
    Yellow()

  &.tune
    // LightBlue()
    Red()

  &.time,&.rhyme
    Purple()

  &.unknown,&.edit
    Grey()

</style>